<template>
  <div class="view-container">

    <div class="main-content">

      <el-button class="main-btn" size="small" type="primary" v-auth="{v:['crm:editorial:shangPin:create']}"
        @click="handlNew" style="margin-bottom: 20px;">
        推荐商销客户
      </el-button>

      <table-view :data="tableData" header-cell-class-name="table-header" size="medium" border @row-click="aloneClick"
        :cell-style="cellStyle">
        <el-table-column prop="sellerNumber" label="推荐商销客户编号" header-align="center" :show-overflow-tooltip="true"
          fixed="left" />

        <el-table-column prop="sellerName" label="商销客户名称" header-align="center" :show-overflow-tooltip="true"
          fixed="left" />

        <el-table-column prop="userName" label="联系人" align="center" :show-overflow-tooltip="true" />

        <el-table-column prop="tel" label="联系电话" align="center" :show-overflow-tooltip="true" />

        <el-table-column prop="createdAt" label="创建时间" align="center" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ dateFormat("yyyy-mm-dd HH:MM:SS",row.createdAt) }}
          </template>
        </el-table-column>

        <el-table-column prop="creatorName" label="创建人" align="center" :show-overflow-tooltip="true" width="120" />

        <el-table-column prop="terminalStatus" label="状态" align="center" :show-overflow-tooltip="true" width="120">
          <template #default="{row}">
            {{ getLabel('reAgentStatus',row?.recommendStatus) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" width="120">
          <template #default="{row}">
            <el-button v-auth="{v:['crm:editorial:shangPin:with'],bool:row?.recommendStatus === '1'}" type="text"
              @click="handlChange(row.id)">处理结束</el-button>
          </template>
        </el-table-column>
      </table-view>

      <Pagination v-model:page="queryParams.page" v-model:limit="queryParams.pageSize"
        style="display: flex; justify-content: flex-end" :total="total" @pagination="handlList" />

    </div>

    <new-form ref="newFormRef" @succsess="succsess" />

    <detail-drawer ref="detailsRef" custom-title>
      <template #title>
        <div style="display: flex;justify-content: space-between;align-items: center">
          <div style="width: 70%">
            <span style="padding-right: 15px">{{ rowData?.sellerName }} </span>
            <el-tag size="small" type="warning">
              {{ getLabel('reAgentStatus',rowData?.recommendStatus) }}
            </el-tag>
          </div>
          <div style="width: 30%;text-align: right" v-if="rowData">
            <el-button v-auth="{v:['crm:editorial:shangPin:with'],bool:rowData?.recommendStatus === '1'}" type="primary"
              size="small" @click="handlChange(rowData?.id)">处理结束</el-button>
          </div>
        </div>
      </template>
      <template #contents>
        <drawer :id="rowData?.id" ref="drawerRef" />
      </template>
    </detail-drawer>

  </div>
</template>

<script>
import {
  getCurrentInstance,
  defineAsyncComponent,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRouter } from "vue-router";

export default {
  components: {
    newForm: defineAsyncComponent(() => import("../modules/newForm.vue")),
    drawer: defineAsyncComponent(() => import("../details/index.vue")),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      queryParams: {
        keyWord: "",
        pageSize: 20,
        page: 1,
      },
      tableData: [{ id: "0", agentNo: "1111" }],
      total: 0,
      newFormRef: null,
      rowData: null,
      detailsRef: null,
      drawerRef: null,
    });

    const handlNew = () => {
      var title = "推荐商销客户";
      data.newFormRef.open(title, null);
    };

    // 获取列表
    const handlList = () => {
      api.editorial.EDITORIAL_SHANGPIN_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
          if(data.rowData){
            data.rowData = data.tableData.find(a=>a.id === data.rowData.id)
          }
        }
      });
    };

    const handlChange = (id) => {
      currentInstance.proxy
        .alertBox({
          message: "确定将推荐商销客户信息更改为已处理？",
        })
        .then(() => {
          api.editorial.EDITORIAL_SHANGPIN_WITH(id).then((res) => {
            if (res.code === 0) {
              handlList();
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    const aloneClick = (row, column, event) => {
      data.rowData = row;
      if (column.label === "操作") return;
      data.detailsRef.open();
    };

    const cellStyle = () => {
      return "cursor:pointer;";
    };

    const succsess = () => {
      handlList();
    };

    //* **************************************
    onMounted((_) => {
      handlList();
    });

    return {
      ...toRefs(data),
      handlNew,
      handlList,
      handlChange,
      aloneClick,
      cellStyle,
      succsess,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>